<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>localStorage</title>
</head>
<body>
    <h4>localStorage的使用：</h4>
    <p>1、存储数据到本地，存储容量20mb左右</p>
    <p>2、不同的浏览器不能共享数据，但是同一个浏览器不同的窗口之间可以共享数据</p>
    <p>3、永久生效，存储在硬盘上，不会随着浏览器的页面的关闭而清除数据</p>
    <ul>
        <li>setItem(key, value) 存储数据，以键值对的方式存储</li>
        <li>getItem(key) 获取数据，通过制定名称的key获取value的值</li>
        <li>removeItem(key) 删除数据，删除指定key的value值</li>
        <li>clear() 清空所有存储的数据</li>
    </ul>
    <input type="text" id="userName"><br>
    <input type="button" value="设置数据" id="setData">
    <input type="button" value="获取数据" id="getData">
    <input type="button" value="删除数据" id="removeData">

    <script>
        // 存储数据
        document.querySelector("#setData").onclick = function () {
            // 获取用户名
            var userName = document.querySelector("#userName").value
            // 存储数据
            if (!userName) {
                console.log("userName 值为空")
                return
            }
            window.localStorage.setItem("userName", userName)
        }

        // 获取数据
        document.querySelector("#getData").onclick = function() {
            var userName = window.localStorage.getItem("userName")
            console.log(userName)
        }

        // 删除指定key的数据
        document.querySelector("#removeData").onclick = function() {
            window.localStorage.removeItem("userName")
        }
    </script>
</body>
</html>